import Taro from "@tarojs/taro";
import { View,Text,Input,Image } from "@tarojs/components";
import { useState } from "react";
import './index.scss'
import defaultPhoto from '../../images/add.png'


export default function SkillCertificate(props){

const {Info,changeSkillItem,imgConvertBase64}=props


const  skillphotoChange=()=>{
  Taro.chooseImage({
    count: 1,// 默认9
    sizeType: ['original', 'compressed'],// 能够指定是原图仍是压缩图，默认两者都有
    sourceType: ['album', 'camera'],// 能够指定来源是相册仍是相机，默认两者都有
    success: function(res) {
        // console.log(res)
        // 返回选定照片的本地文件路径列表，tempFilePath能够做为img标签的src属性显示图片
        let tempFilePaths = res.tempFilePaths;
        let changeFile = {};
        changeFile = tempFilePaths[0];
        // console.log(changeFile);
        imgConvertBase64(changeFile,handleSkillPhotoChange('photo')) 
        }
  })
}

const handleSkillChange=(key)=>(value)=>{
  changeSkillItem((//修改子类展示数据
    {//修改子类展示数据
      ...Info,
      [key]:value
      }
    ))
}


const handleSkillPhotoChange=(key)=>(value)=>{
  changeSkillItem((//修改子类照片展示数据
    {//修改子类展示数据
      ...Info,
      [key]:'data:image/png;base64,'+value
      }
    ))
}


  return(
    <View className='eduBack'>
    <View className='at-row'>
        <View className='at-col at-col-5'>
            <Input 
              className='at-col at-col-9' 
              placeholder='技能证书名称'
              name='name'
              type='text'
              value={Info.name}
              onBlur={(e)=>{handleSkillChange('name')(e.detail.value)}}
            />
          </View>
{/* 
        {Info.photo?
        <Image className='at-col at-col-7 myResumePhoto' src={'data:image/png;base64,'+Info.photo} onClick={skillphotoChange} /> 
          :
       <Image className='at-col at-col-7 myResumePhoto' src={defaultPhoto} onClick={skillphotoChange} /> 
      } */}
              
    <Image className='at-col at-col-7 myResumePhoto' src={'data:image/png;base64,'+Info.photo} onClick={handleSkillPhotoChange} /> 

      
   </View>
    </View>
  )
}